<template>
  <div class="z_nav_wrap" :class="{ isShow: isShow }">
    <div class="z_nav">
      <div class="slogan">
        <div class="n1">{{ slogan }}</div>
        <div class="n2">{{ enSlogan }}</div>
      </div>
      <div class="left">
        <div class="item">
          <router-link to="/web">首页</router-link>
        </div>
        <div class="item">
          <router-link to="/web/news">新闻</router-link>
        </div>
        <div class="item">
          <router-link to="/web/jsbase">Js基础</router-link>
        </div>
      </div>
      <div class="right">
        <z-dropdown v-if="userInfo.token !== ''"></z-dropdown>
        <router-link v-else :to="{ name: 'Login' }">登录</router-link>
        <z-theme class="theme"></z-theme>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import ZTheme from "@/components/common/theme/index.vue";
import ZDropdown from "@/components/common/dropdown/index.vue";
import { siteTitle, slogan, enSlogan, icon } from "@/conf/global";
import { userStoreModel } from "@/stores/user";
import { storeToRefs } from "pinia";
const userStore = userStoreModel();
const { userInfo } = storeToRefs(userStore);
interface Props {
  noScroll?: boolean;
  scrollTop?: number;
}
const props = defineProps<Props>();
const { noScroll = false, scrollTop = 200 } = props;
const isShow = ref(noScroll);

if (!noScroll) {
  window.onscroll = () => {
    console.log(document.documentElement.scrollTop);

    const top = document.documentElement.scrollTop;
    if (top > scrollTop) {
      isShow.value = true;
    } else {
      isShow.value = false;
    }
  };
}
</script>
<style lang="less">
.z_nav_wrap {
  width: 100vw;
  height: 60px;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  z-index: 999;
  color: #fff;
  transition: all 0.3s;

  &.isShow {
    background-color: var(--color-bg-1);
    color: var(--color-text-2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    .n1 {
      color: var(--color-text-1);
    }
    .n2 {
      color: var(--color-text-2);
    }
    a {
      color: var(--color-text-2) !important;
    }
    .theme {
      color: var(--color-text-2) !important;
    }
  }
  .z_nav {
    width: 1200px;
    display: flex;
    align-items: center;
    a {
      text-decoration: none;
      color: inherit;
    }
    .slogan {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 10%;
      .n1 {
        font-size: 20px;
      }
      .n2 {
        font-size: 12px;
      }
    }
    .left {
      width: 70%;
      display: flex;
      align-items: center;
      a {
        font-size: 14px;
      }
      .item {
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .right {
      width: 20%;
      display: flex;
      align-items: center;
      .theme {
        margin-left: 20px;
      }
    }
    a {
      font-size: 14px;
    }
    a.router-link-exact-active {
      color: @primary-6 !important;
    }
  }
}
</style>
